$border-width: 3px;
$border-radius: 12px;

.dialogRoot {
  :global(.ant-drawer-content-wrapper) {
    margin: 1em;
    box-shadow: -3rem 0 3rem -2rem #d1d0d0;
    max-width: 90vw;

    &::before {
      content: '';
      background: linear-gradient(
        130deg,
        var(--vd-color-primary-900),
        var(--vd-color-primary-200) 41.07%,
        var(--vd-color-secondary-800) 76.05%
      );
      position: absolute;
      top: -$border-width;
      left: -$border-width;
      bottom: -$border-width;
      right: -$border-width;
      z-index: 0;
      border-radius: $border-radius;
    }
  }

  :global(.ant-drawer-content) {
    z-index: 2;
    position: relative;
    overflow: visible;
  }

  :global(.ant-drawer-body) {
    padding: 0;
    background-color: #f4f6fb;
  }

  :global(.ant-drawer-body),
  :global(.ant-drawer-content),
  .root {
    border-radius: $border-radius;
  }
}

.head {
  background-color: white;
  padding: var(--vd-spacing-sm);
  border-bottom: 1px solid var(--vd-color-gray-300);
  display: flex;
  align-items: center;

  .title {
    font-size: var(--vd-font-size-h1);
    font-weight: bold;
    flex: 1;
    background: linear-gradient(292deg, var(--vd-color-primary) 35%, var(--vd-color-primary-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .back {
    margin-right: 10px;
    cursor: pointer;
    color: var(--vd-color-gray-700);
  }

  .close,
  .newWindow {
    color: var(--vd-color-gray-600);
    font-size: 18px;
    cursor: pointer;
    margin-left: var(--vd-spacing-xs);

    &:hover {
      color: var(--vd-color-gray-800);
    }
  }
}

.root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.history {
  flex: 1;
  overflow: hidden;
}

.prompt {
  background-color: white;
  padding: var(--vd-spacing-xs) var(--vd-spacing-sm);
  line-height: 1;
  border-top: 1px solid var(--vd-color-gray-300);
}

.keybinding {
  font-size: 0.8rem;
  margin-left: 10px;
}

.resizer {
  position: absolute;
  width: $border-width;
  left: -$border-width;
  top: $border-radius;
  bottom: $border-radius;
  cursor: col-resize;
  z-index: 10;

  &:active {
    background-color: #ffffff80;
  }
}
